import React from 'react';
import * as echarts from 'echarts';
import '../static/main.css';

//知识推断关系图-echarts组件
class Graph extends React.Component{
  componentDidMount() {
    var dom = document.getElementById("graph");
    var myChart = echarts.init(dom);
    var option;
    option = {
        title: {
            text: ''
        },
        grid:{
          containLabel: true
        },
        tooltip: {},
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'quinticInOut',
        series: [
            {
                type: 'graph',
                //图的布局circular、force
                layout: 'circular',
                force:{
                  repulsion:100,
                  gravity:0,
                  edgeLength: [100,180],
                  layoutAnimation:false
                },
                symbolSize: 80,
                roam: false,
                label: {
                    show: true
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    fontSize: 20
                },
                data: [{
                    name: '万科',
                    itemStyle: {
                        color: '#30C3EF',
                        borderWidth:4
                    }
                }, {
                    name: '万科地产',
                    itemStyle: {
                        color: '#F5905A'
                    }
                }, {
                    name: '万科集团',
                    itemStyle: {
                        color: '#F5905A'
                    }
                }, {
                    name: '万科物业',
                    itemStyle: {
                        color: '#F5905A'
                    }
                }],
                // links: [],
                links: [{
                    source: 0,
                    target: 1,
                    label: {
                        show: true,
                        formatter: '？'
                    },
                    lineStyle: {
                        width: 2,
                        type:'dotted',
                        color:'red',
                        curveness: 0.2
                    }
                },{
                    source: 0,
                    target: 2,
                    label: {
                        show: true,
                        formatter: '无'
                    },
                    lineStyle: {
                        width: 2,
                        color:'#A0ABC2',
                        curveness: 0.2
                    }
                }, {
                    source: 0,
                    target: 3,
                    label: {
                        show: true,
                        formatter: '等同'
                    },
                    lineStyle: {
                        width: 2,
                        color:'#A0ABC2',
                        curveness: 0.2
                    }
                }],
                lineStyle: {
                    opacity: 0.9,
                    width: 2,
                    curveness: 0
                }
            }
        ]
    };
    
    if (option && typeof option === 'object') {
      console.log(option)
        myChart.setOption(option);
        myChart.on('click', function(params) {
            // console.log(params)
          // window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
        });
    }
  }
  
  render () {
    return (
      <div className="graph">
          <div id="graph" className="graph-inner"></div>
      </div>
    );
  }
}

export default Graph